<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <svg width="500" height="500" style="background: #efefef;">

    <!-- <rect x="50" y="100" width="100" height="50" fill="red" style="" stroke="blue" stroke-width="5" /> -->

    <!-- <ellipse cx="200" cy="200" rx="50" ry="100" style="fill:orange; stroke: orangered; stroke-width: 5px;" /> -->

    <!-- <line x1="50" y1="50" x2="450" y2="450" stroke="red" stroke-width="3" /> -->


    <!-- <circle cx="225" cy="225" r="100" style="fill:peru;" /> -->

    <!-- <polygon points="50,20 150,60  120,200  100,200" style="fill:pink;" fill="none" stroke="red" stroke-width="5" /> -->

    <!-- <!-- <polyline points="10,20 50,60  120,200  200,300" fill="blue" stroke="red" stroke-width="5"></polyline> -->
    -->



    <!-- <path d="M30,30 L200,200  L230,260" fill="none" stroke="green" stroke-width="5" />

   -->

    <!-- <defs>

      <g id="group">
        <rect x="50" y="100" width="100" height="50" style="fill:green;" stroke="blue" stroke-width="5">

          <animate attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
        </rect>
        <circle cx="225" cy="225" r="100" style="fill:peru;">

          <animate attributeName="cx" from="225" to="100" dur="5s" repeatCount="indefinite" />
        </circle>
      </g>

    </defs> -->

    <!-- <use xlink:href="#group" x="30" y="30" />
    <use xlink:href="#group" x="130" y="130" /> -->

    <!-- <text x="200" y="200" style="fill: none; stroke: red; stroke-width: 1; font-size: 45px;">gp16</text> -->


    <clipPath id="myClipPath">
      <rect width="200" height="100" x="200" y="200"></rect>
    </clipPath>

    <circle cx="260" clip-path="url(#myClipPath)" cy="260" r="100" style="" />


  </svg>

</body>

</html>